<template>
	<div>
		<div style="height: 50px;line-height: 50px;border-bottom: 2px solid coral;padding-left: 100px;">
			<b style="font-size: 24px;color: coral;">橙 糖 小 铺 后 台 管 理 系 统</b>
		</div>
		
		<div style="width: 50%; margin: auto;margin-top:180px;mborder-radius: 20px;box-shadow: 0 0 10px -2px indianred;display: flex;">
			<div style="flex: 1;padding: 20px;">
				<img src="@/assets/image/dlbj.jpg" alt="" style="width: 100%;height: 100%;">
			</div>
			
			<div style="flex: 1;padding: 20px;">
				<div style="margin: 20px 0;color: coral;font-size: 20px;text-align: center;"><h3>欢迎登录</h3></div>
				<el-form ref="loginForm" :rules="rules" :model="loginForm" >
					<el-form-item prop="userNo">
						<el-input size="medium" prefix-icon="el-icon-user" auto-complete="off" v-model="loginForm.userNo" placeholder="请输入账号"></el-input>
					</el-form-item>
					
					<el-form-item prop="userPwd">
						<el-input size="medium" prefix-icon="el-icon-lock" type="password" auto-complete="off" v-model="loginForm.userPwd" placeholder="请输入密码"></el-input>
					</el-form-item>
						
					<el-button type="primary" @click="Login()" style="width: 100%;">登录</el-button>
						<br/><br/>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		name: "Login",
		data: function () {
			return{
				loginForm:{
					userNo:"",
					userPwd:"",
				},
				rules:{
					userNo:[{
						required:true,
						message:"请输入账号",
						trigger:'blur'
					}],
					userPwd:[{
						required:true,
						message:"请输入密码",
						trigger:'blur'
					}],
				},
			}
		},
		methods: {
			Login:function(){
				this.$refs.loginForm.validate((valid) => {
					if (valid) {
						this.$Request
						.fetch_("/user/userLogin","post",this.loginForm)
						.then((result) => {
						//console.log(result);
						if(result.status == this.$Request.OK_CODE){
							// 登录成功，将用户信息放入 VuexStore
							this.$VuexStore.commit("setToken", result.data);
							this.$router.push("/");
						}else{
							this.$message.error(result.msg);
						}
						})
						.catch((error) =>{
							this.$message.error(error);
						});
					} else {
						this.$message.error("请输入所有字段");
						return false;
					}
				});
			}
		},
	}
</script>

<style>
.loginContanier{
	border-radius: 15px;
	background-clip: padding-box;
	margin: 400px auto;
	width: 400px;
	background: #fff;
	border: 1px solid #eaeaea;
	box-shadow: 0 0 10px -2px lightcoral;
}
</style>